import React from 'react'
import {Form, Modal, Button, Input, Radio,InputNumber} from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;
import reqwest from 'reqwest';

class AddLink extends React.Component {
  state = {
    ModalText: 'Content of the modal',
    visible: false,
    confirmLoading: false,
    data:this.props.rowData
  }
  showModal = () => {
    this.setState({
      visible: true,
      data:'',
      status:'create'
    });
  }
  fetch = (params = {}) => {
    reqwest({
      url:`http://admin.mapboom.cn/portal/v1.0/outside_link?id=${params.id}`,
      method: this.state.status=='create'?'post':'put',
      data: {
        ...params,
      },
      type: 'json',
    }).then((data) => {
        this.setState({
          visible: false,
          confirmLoading: false,
        });
        this.handleCancel();
        if(this.state.status == "create") this.props.resetTable();
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let arr = this.state.data
        if(this.state.status !='create'){
          for(var key in values){
            arr[key] = values[key]
          }
         
          this.fetch(arr)
        }else{
       
          this.fetch(values)
        }
        
      }
    });
  }
  handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    this.handleSubmit()
  }
  handleCancel = () => {
    this.props.handleModelCancel();
    this.props.form.resetFields();
    this.setState({
      visible: false,
    });
  }
  componentWillReceiveProps(nextProps){
      this.setState({
          data:nextProps.rowData,
          status:nextProps.status
      })
    }
  render() {
    const { visible, confirmLoading, ModalText } = this.state;
    const { getFieldDecorator } = this.props.form;
    const item = this.state.data;

    const formItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 18,
      },
    }
    return (
      <div>
        <Modal title="Title"
          visible={this.props.visible}
          onOk={this.handleSubmit}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          maskClosable={false}
        >
        <Form >
          <FormItem label="标题" {...formItemLayout}>
            {getFieldDecorator('title', {
              initialValue: item.title,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="Logo" {...formItemLayout}>
            {getFieldDecorator('logo', {
              initialValue: item.logo,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="链接" {...formItemLayout}>
            {getFieldDecorator('link', {
              initialValue: item.link,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>

          <FormItem label="权重" {...formItemLayout}>
            {getFieldDecorator('weight', {
              initialValue: item.weight || 1,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="链接状态" {...formItemLayout}>
            {getFieldDecorator('link_status', {
              initialValue: item.link_status ||2,
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Radio.Group >
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>已发布</Radio>
                <Radio value={3}>已中止</Radio>
                <Radio value={4}>草稿</Radio>
              </Radio.Group>
            )}
          </FormItem>
          <FormItem label="分组" {...formItemLayout}>
            {getFieldDecorator('link_group', {
              initialValue: item.link_group || 2,
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Radio.Group>
                <Radio value={1}>合作伙伴</Radio>
                <Radio value={2}>友情链接</Radio>
                <Radio value={3}>其他链接</Radio>
              </Radio.Group>
            )}
          </FormItem>
          <FormItem label="E-mail" {...formItemLayout}>
            {getFieldDecorator('email', {
              initialValue: item.email,
              rules: [
                {
                  required: true,
                  pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                  message: 'The input is not valid E-mail!',
                },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem label="描述" {...formItemLayout}>
            {getFieldDecorator('description', {
              initialValue: item.description,
              
            })(<TextArea  />)}
          </FormItem>
        </Form>
        </Modal>
      </div>
    );
  }
}


export default Form.create()(AddLink)
